<template>
  <div class="personnelList billShopList">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="lh lh-caiwu fw_100"></i>
      </el-breadcrumb-item>
      <el-breadcrumb-item>财务及数据</el-breadcrumb-item>
      <el-breadcrumb-item>人才结算单</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content_Box box-shadow mt_15">
      <div class="tableMaxBox">
        <div class="py_5 px_10">
          <el-form
            :inline="true"
            :model="ruleForm"
            class="form-inline mt_10"
            @keyup.enter.native="shearchBtn()"
          >
            <el-form-item>
              <el-input
                size="mini"
                class="w_130"
                v-model="s_sn"
                placeholder="结算单编号"
              ></el-input>
            </el-form-item>
            <lh-agent-list
              @sendValue="setValue"
              :reset="agent_reset"
            ></lh-agent-list>
            <el-form-item>
              <el-select
                class="w_110"
                v-model="city_val"
                placeholder="请选择城市"
                @change="changeCity"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.id"
                  :label="item.name"
                  :value="`${item.id}|${item.name}`"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="s_area_arr"
                multiple
                collapse-tags
                placeholder="商圈"
              >
                <el-button
                  size="mini"
                  type="primary"
                  class="round-right all-area"
                  @click="selectAllArea()"
                  native-type="button"
                  >{{ areaStatus ? '全选' : '取消全选' }}</el-button
                >
                <el-option
                  v-for="item in areaList"
                  :key="item.id"
                  :label="item.area_name"
                  :value="`${item.id}|${item.area_name}`"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item class="w_150">
              <el-autocomplete
                class="inline-input"
                v-model="business_name"
                :fetch-suggestions="querySearch3"
                placeholder="商户名称"
                :trigger-on-focus="true"
                @select="handleSelect3"
                clearable
              ></el-autocomplete>
            </el-form-item>

            <el-form-item>
              <el-autocomplete
                size="mini"
                class="w_150"
                v-model="s_shop_name"
                :fetch-suggestions="querySearch"
                placeholder="店铺名称"
                :trigger-on-focus="true"
                clearable
                @select="handleSelect"
              ></el-autocomplete>
            </el-form-item>

            <el-form-item>
              <el-input
                size="mini"
                class="w_120"
                v-model="s_staff_name"
                placeholder="结算单对象"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-select
                size="mini"
                class="w_80"
                v-model="s_staff_work_type"
                placeholder="人才类型"
                clearable
              >
                <el-option label="全职" value="2"></el-option>
                <el-option label="兼职" value="1"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-select
                size="mini"
                class="w_120"
                v-model="s_type"
                placeholder="结算单类型"
                clearable
              >
                <el-option label="平台任务结算单" value="1"></el-option>
                <el-option label="扣罚结算单" value="2"></el-option>
                <el-option label="平台激励结算单" value="3"></el-option>
                <el-option label="商家任务结算单" value="4"></el-option>
              </el-select>
            </el-form-item>

            <!-- 人才账单状态
                10 => '已生成（原待确认）',
                20 => '待付款（原已确认）',
                30 => '已提现（原已回款）',
								70 => '异常' -->
            <el-form-item>
              <el-select
                size="mini"
                class="w_120"
                v-model="s_status"
                placeholder="状态"
                clearable
              >
                <el-option label="已生成" value="10"></el-option>
                <el-option label="已确认" value="13"></el-option>
                <el-option label="待审核" value="17"></el-option>
                <el-option label="待提现" value="20"></el-option>
                <el-option label="提现中" value="25"></el-option>
                <el-option label="已提现" value="30"></el-option>
                <el-option label="异常" value="70"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item prop="datetime1">
              <el-date-picker
                size="mini"
                class="w_120i"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="结算单开始日期"
                v-model="ruleForm.bill_date_start"
              ></el-date-picker> </el-form-item
            >~
            <el-form-item prop="datetime2">
              <el-date-picker
                size="mini"
                class="w_120i"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="结算单结束日期"
                v-model="ruleForm.bill_date_end"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-select
                size="mini"
                class="w_140"
                v-model="s_time_type"
                placeholder="时间类型"
                clearable
              >
                <el-option label="创建时间" value="1"></el-option>
                <el-option label="支付/回款时间" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="datetime1">
              <el-date-picker
                size="mini"
                class="w_180i"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                default-time="00:00:00"
                placeholder="开始时间"
                v-model="ruleForm.date1"
              ></el-date-picker> </el-form-item
            >~
            <el-form-item prop="datetime2">
              <el-date-picker
                size="mini"
                class="w_180i"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                default-time="23:59:59"
                placeholder="结束时间"
                v-model="ruleForm.date2"
              ></el-date-picker>
            </el-form-item>
            <el-button
              size="mini"
              type="primary"
              class="round-right"
              @click="shearchBtn"
              native-type="button"
              >搜索</el-button
            >
            <el-button size="mini" round @click="resetBtn">重置</el-button>
          </el-form>

          <div>
            <!-- <div id="ball" style="top: 210px; left: 210px; transition: 'left 0s, top 0s';"></div> -->
            <span class="addOK2" style="width: 70px" @click="downloadOrder()"
              >导出结算单</span
            >
            <span
              class="resetBtn mb_10"
              @click="batchPay(1)"
              style="width: 70px; margin-top: 10px; text-align: center"
              v-if="!from && !from_sn"
              >批量确认</span
            >
            <span
              class="resetBtn mb_10"
              @click="batchPay(2)"
              style="width: 70px; margin-top: 10px; text-align: center"
              v-if="!from && !from_sn"
              >批量已提现</span
            >
            <span
              class="resetBtn mb_10"
              @click="batchPay(3)"
              style="width: 70px; margin-top: 10px; text-align: center"
              v-if="from"
              >批量移除</span
            >
            <span
              class="resetBtn mb_10"
              @click="downloadDetail"
              style="width: 110px; margin-top: 10px; text-align: center"
            >
              导出明细({{ alltotal }})
            </span>
          </div>
        </div>
        <template>
          <el-table
            :data="demandList"
            stripe
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              :selectable="checkboxT"
              disabled="true"
              width="50"
            >
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="50"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="sn"
              label="结算单编号"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="agent_name"
              label="代理商"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="city_name"
              label="城市"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="staff_name"
              label="结算单对象"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="staff_sn"
              label="人才编号"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="staff_work_type"
              label="人才类型"
              width="75px"
            ></el-table-column>
            <!-- <el-table-column prop="bill_date" label="账单日期" width="120"></el-table-column> -->
            <el-table-column
              prop="bill_date_start"
              label="结算单开始日期"
              width="140"
            >
              <template slot-scope="{ row }">
                <span>{{
                  $moment(row.bill_date_start).format('YYYY-MM-DD')
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="bill_date_end"
              label="结算单结束日期"
              width="140"
            >
              <template slot-scope="{ row }">
                <span>{{
                  $moment(row.bill_date_end).format('YYYY-MM-DD')
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="结算单类型" width="110">
              <template slot-scope="{ row }">
                <span class="text-success" v-if="row.type == 1"
                  >平台任务结算单</span
                >
                <span class="text-primary" v-if="row.type == 2"
                  >扣罚结算单</span
                >
                <span class="text-primary" v-if="row.type == 3"
                  >平台激励结算单</span
                >
                <span class="text-primary" v-if="row.type == 4"
                  >商家任务结算单</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="business_name" label="商户名称" width="120">
            </el-table-column>
            <el-table-column prop="shop_name" label="店铺名称" width="120">
            </el-table-column>
            <el-table-column
              prop="bill_total_hour"
              label="合计时长"
              width="100"
            >
            </el-table-column>
            <el-table-column prop="amount" label="结算单金额" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.amount | filterNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="count" label="数量">
              <template slot-scope="{ row }">
                <span
                  class="u text-primary pointer"
                  style="font-weight: bold"
                  @click="goToList(row)"
                  >{{ row.count }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="120">
              <template slot-scope="{ row }">
                <span class="text-primary" v-if="row.status == 10">已生成</span>
                <span class="text-secondary" v-if="row.status == 13"
                  >已确认</span
                >
                <span class="text-info" v-if="row.status == 17">待审核</span>
                <span class="text-default" v-if="row.status == 20">待提现</span>
                <span class="text-warning" v-if="row.status == 25">提现中</span>
                <span class="text-success" v-if="row.status == 30">已提现</span>
                <span class="text-danger" v-if="row.status == 70">异常</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="payment_order_sn" label="付款申请编号" width="120">
							<template slot-scope="{ row, $index }">
								<span>{{ row.payment_order_sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="withdraw_cash_sn" label="提现记录编号" width="140">
							<template slot-scope="{ row, $index }">
								<span>{{ row.withdraw_cash_sn }}</span>
							</template>
						</el-table-column> -->
            <el-table-column
              prop="add_time"
              label="创建时间"
              width="150"
            ></el-table-column>
            <!-- <el-table-column prop="sn" label="结算记录编号" width="120">
							<template slot-scope="{ row, $index }">
								<span>{{ row.sn }}</span>
							</template>
						</el-table-column> -->
            <!-- <el-table-column prop="pay_time" label="打款/回款时间" width="150"></el-table-column> -->
            <el-table-column
              prop="payer"
              label="打款/回款人"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              width="150"
            ></el-table-column>
            <el-table-column label="操作" width="280px" fixed="right">
              <template slot-scope="{ row }">
                <el-link
                  type="info"
                  class="InfoFont text-danger"
                  :underline="false"
                  @click="goToMain(row)"
                  >查看</el-link
                >
                <!-- v-if="row.status == 13" -->
                <el-link
                  v-if="row.status == 13"
                  type="info"
                  class="InfoFont text-danger"
                  :underline="false"
                  @click="goWithDrawal(row)"
                  >撤回</el-link
                >
                <el-link
                  type="primary"
                  class="InfoFont text-primary"
                  :underline="false"
                  v-if="row.status == 70"
                  @click="regenerate(row)"
                  >重新生成</el-link
                >
                <!-- 待确认状态下出现此按钮 -->
                <el-link
                  type="info"
                  class="InfoFont text-danger"
                  :underline="false"
                  v-if="row.status == 10"
                  @click="Qr(row)"
                  >确认结算单</el-link
                >
                <el-link
                  type="info"
                  class="InfoFont text-primary"
                  :underline="false"
                  @click="downloadOrdermini(row)"
                  >导出明细</el-link
                >
                <el-link
                  type="info"
                  class="InfoFont text-primary"
                  :underline="false"
                  @click="goTorecord(row)"
                  >操作记录</el-link
                >
                <el-link
                  type="info"
                  class="InfoFont text-primary"
                  :underline="false"
                  v-if="row.status == 13"
                  @click="Hk(row)"
                  >已提现</el-link
                >
                <el-link
                  v-if="from"
                  type="info"
                  class="InfoFont text-primary"
                  :underline="false"
                  @click="toRemoveOrder(row)"
                  >移除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <page
            :total="total"
            :pageNums="pageNum"
            :disableMountedFetch="true"
            @pagedata="onChildValue"
          ></page>
        </template>
      </div>
    </div>
    <!-- 回款确认-弹框 -->
    <el-dialog
      :title="diaTitle"
      :visible.sync="ShowHk"
      width="560px"
      :close-on-click-modal="false"
    >
      <div class="auditCentent">
        <div class="row-info clear">
          <div class="fl title-key">&nbsp;</div>
          <div class="fl list-cont">
            <span>确认此笔扣罚已抵充打款/已收到人才的扣罚打款。</span>
          </div>
        </div>
        <div class="row-info clear">
          <div class="fl title-key">
            <i class="lhadmin lhadmin-wujiaoxing"></i>备注
          </div>
          <div class="fl list-cont">
            <el-input
              type="textarea"
              :rows="4"
              :cols="32"
              v-model="remark"
              maxlength="250"
            ></el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="btnOK mr_20" @click="addCxBtn(1)">确 定</span>
        <span class="resetBtn" @click="hiddenRY()">取 消</span>
      </div>
    </el-dialog>
    <!-- 打款确认-弹框 -->
    <el-dialog
      :title="diaTitle"
      :visible.sync="ShowDk"
      width="560px"
      :close-on-click-modal="false"
    >
      <div class="auditCentent">
        <div class="row-info clear">
          <div class="fl title-key">&nbsp;</div>
          <div class="fl list-cont">
            <span>确认此笔扣罚已抵充打款/已收到人才的扣罚打款。</span>
          </div>
        </div>
        <div class="row-info clear">
          <div class="fl title-key">
            <i class="lhadmin lhadmin-wujiaoxing"></i>备注
          </div>
          <div class="fl list-cont">
            <el-input
              type="textarea"
              :rows="4"
              :cols="32"
              v-model="remark"
              maxlength="250"
            ></el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="btnOK mr_20" @click="addCxBtn(1)">确 定</span>
        <span class="resetBtn" @click="hiddenRY()">取 消</span>
      </div>
    </el-dialog>
    <!-- 确认-弹框 -->
    <el-dialog
      :title="diaTitle"
      :visible.sync="ShowQr"
      width="560px"
      :close-on-click-modal="false"
    >
      <div class="auditCentent">
        <div class="row-info clear">
          <div class="fl title-key">&nbsp;</div>
          <div class="fl list-cont">
            <span>结算单已经过劳动者和平台确认，无异议。</span>
          </div>
        </div>
        <div class="row-info clear">
          <div class="fl title-key">
            <i class="lhadmin lhadmin-wujiaoxing"></i>备注
          </div>
          <div class="fl list-cont">
            <el-input
              type="textarea"
              :rows="4"
              :cols="32"
              v-model="remark"
              maxlength="250"
            ></el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="btnOK mr_20" @click="addQrBtn()">确 定</span>
        <span class="resetBtn" @click="hiddenRY()">取 消</span>
      </div>
    </el-dialog>
    <!-- 操作记录-弹框 -->
    <el-dialog
      :title="diaTitle"
      :visible.sync="cordTicket"
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="auditCentent">
        <div class="timeline" v-for="(item, index) in message" :key="index">
          <el-button
            type="success"
            class="fl"
            round
            size="mini"
            v-if="item.subject_type == 'created'"
            >已生成</el-button
          >
          <el-button
            type="success"
            class="fl"
            round
            size="mini"
            v-if="item.subject_type == 'check'"
            >已确认</el-button
          >
          <el-button
            type="success"
            class="fl"
            round
            size="mini"
            v-if="item.subject_type == 'toAudit'"
            >已入付款单</el-button
          >
          <el-button
            type="success"
            class="fl"
            round
            size="mini"
            v-if="item.subject_type == 'accept'"
            >待提现</el-button
          >
          <el-button
            type="success"
            class="fl"
            round
            size="mini"
            v-if="item.subject_type == 'rollbackCheck'"
            >移除付款单</el-button
          >
          <el-button
            type="success"
            class="fl"
            round
            size="mini"
            v-if="item.subject_type == 'paying'"
            >提现中</el-button
          >
          <el-button
            type="success"
            class="fl"
            round
            size="mini"
            v-if="item.subject_type == 'pay'"
            >已提现</el-button
          >
          <el-button
            type="success"
            class="fl"
            round
            size="mini"
            v-if="item.subject_type == 'withdrawal'"
            >结算单撤回</el-button
          >
          <span>{{ item.add_time }}</span>
          <span>{{ item.user_name }}</span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="resetBtn" @click="hiddenRY()">关 闭</span>
      </div>
    </el-dialog>
    <!-- 撤回-弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="showWithDrawal"
      width="560px"
      :close-on-click-modal="false"
    >
      <div class="auditCentent">
        <div class="row-info clear">
          <div class="fl title-key">&nbsp;</div>
          <div class="fl list-cont">
            <span>确认要将该结算单撤回到已生成状态吗？</span>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="btnOK mr_20" @click="withDrawalOk">确 定</span>
        <span class="resetBtn" @click="showWithDrawal = false">取 消</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import qs from 'qs'
import {
  staffConfirmy,
  staffBatchPay,
  staffRestartCreate,
  staffPay,
  removeOrder,
  fetchStaffList,
  exportAllBillDetails,
  billWithDrawal
} from '@/api/bill'
var common = require('../../../static/tool.js')
import { fetchCityList } from '@/api/city.js'
import { fetchBusinessForSearchList, fetchShopList } from '@/api/shop.js'
import axios from 'axios'
export default {
  name: 'BillList',
  data() {
    return {
      id: '',
      ids: '',
      index: '',
      sn: '',
      message: '',
      windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
      screenHeight: document.documentElement.clientHeight,
      manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
      url: common.url,
      head_url: common.head_url,
      //搜索对应值
      s_sn: '',
      s_staff_name: '',
      s_staff_work_type: '',
      s_area_arr: '', //商圈信息
      s_area_id: '',
      s_area_name: '',
      s_type: '',
      s_status: '',
      s_time_type: '1',
      merchantsLists: [], //商户数据
      business_name: '',
      business_sn: '',
      s_shop_name: '',
      shop_sn: '',

      ruleForm: {
        bill_date_start: '',
        bill_date_end: '',
        date1: '', //开始时间
        date2: '' //结束时间
      },
      cityList: [], //城市列表
      city_arr: '',
      city_id: '',
      city_name: '',
      city_val: '',
      demandList: [], //人才结算单列表
      multipleSelection: [], //选中的序号集合
      areaList: [], //区域列表
      //向分页组件传值
      total: 0,
      pageNum: 1,
      pageSizeNow: 20,
      // 回款确认-弹框
      diaTitle: '',
      ShowHk: false,
      ShowDk: false,
      ShowQr: false,
      remark: '', //备注内容
      // 操作记录-弹框
      cordTicket: false,
      alltotal: 0,
      areaStatus: true,
      shopList: [],
      agent_id: '',
      agent_reset: 0,
      qrType: '', //批量处理类型
      qrAll: '', //批量处理选中信息
      showWithDrawal: false,
      withDrawalSn: ''
    }
  },
  computed: {
    city_value() {
      return this.city_val
    }
  },
  watch: {
    //商圈改变
    areaList(newValue, oldValue) {
      this.listShop()
    },
    // 城市改变
    city_value(newVal, oldVal) {
      if (oldVal) {
        let [id, name] = oldVal.split('|')
        if (id === '北京') {
          id = 1
        }
        // 存储旧的商圈数据
        this.selectedAreasMap[`city-${id}`] = this.s_area_arr
      }
      console.log('存储值', this.selectedAreasMap)
      if (newVal && this.city_id) {
        this.fetchAreaList(this.city_id) //商圈列表
      }
    }
  },
  created() {
    if (!this.$route.query.payment_order_sn) {
      this.ruleForm.date1 = this.$moment().subtract('days', 7).format('YYYY-MM-DD') + ' 00:00:00'
      this.ruleForm.date2 = this.$moment().format('YYYY-MM-DD') + ' 23:59:59'
    }
    this.s_staff_name = this.$route.query.staff_name || ''
    this.s_sn = this.$route.query.bill_detail || ''
    this.from = this.$route.query.from || ''
    this.from_sn = this.$route.query.withdraw_cash_sn || ''
    this.selectedAreasMap = {}
    this.getMerchants()
  },
  mounted() { },
  methods: {
    goWithDrawal(data) {
      this.showWithDrawal = true
      this.withDrawalSn = data.sn
    },
    async withDrawalOk() {
      try {
        const res = await billWithDrawal({
          sn: this.withDrawalSn
        })
        this.showWithDrawal = false

        this.listShop()
      } catch (error) {
        console.log('error', error)
      }
    },
    //获取商户列表
    async getMerchants() {
      try {
        let ret = await fetchBusinessForSearchList()
        console.log(ret)
        ret.list.forEach(item => {
          item.value = item.name
        })
        this.merchantsLists = ret.list
      } catch (err) {
        console.log(err)
      }
    },
    //商户的自动完成
    querySearch3(queryString, cb) {
      var restaurants = this.merchantsLists
      var results = queryString ? restaurants.filter(this.createFilter3(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter3(queryString) {
      return restaurant => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    handleSelect3(item) {
      this.business_name = item.name
      this.business_sn = item.business_sn
      this.getShopList()
    },
    //店铺的自动完成
    querySearch(queryString, cb) {
      var restaurants = this.shopList
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return restaurant => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    handleSelect(item) {
      console.log(item)
      this.shop_sn = item.shop_sn
    },

    async getShopList() {
      try {
        this.shop_sn = ''
        this.s_shop_name = ''
        let ret = await fetchShopList({ sign_status: 30, city_id: this.city_id, business_sn: this.business_sn })
        ret.list.forEach(item => {
          item.value = item.name
        })
        this.shopList = ret.list
      } catch (err) {
        console.log(err)
      }
    },

    async listShop() {
      try {
        let s_departmentIds_Arr = new Array()
        this.s_area_arr.forEach(element => {
          let [id, name] = element.split('|') // es6 数组解构赋值
          s_departmentIds_Arr.push(id.toString())
        })

        if (this.ruleForm.date1 == null) {
          this.ruleForm.date1 = ''
        }

        if (this.ruleForm.date2 == null) {
          this.ruleForm.date2 = ''
        }

        if (this.ruleForm.bill_date_start && !this.ruleForm.bill_date_end) {
          this.$message.error('结算单结束日期不可为空！')
          return
        }
        if (!this.ruleForm.bill_date_start && this.ruleForm.bill_date_end) {
          this.$message.error('结算单开始日期不可为空！')
          return
        }
        if (!this.business_name) {
          this.business_sn = ''
        }

        let obj = {
          sn: this.s_sn,
          city_id: this.city_id,
          area_id: '' + s_departmentIds_Arr,
          staff_name: this.s_staff_name,
          work_type: this.s_staff_work_type,
          type: this.s_type,
          status: this.s_status,
          time_type: this.s_time_type,
          bill_date_start: this.ruleForm.bill_date_start ? this.ruleForm.bill_date_start + ' 00:00:00' : '',
          bill_date_end: this.ruleForm.bill_date_end ? this.ruleForm.bill_date_end + ' 23:59:59' : '',
          start_time: this.ruleForm.date1,
          end_time: this.ruleForm.date2,
          shop_sn: this.shop_sn,
          business_sn: this.business_sn,
          agent_id: this.agent_id
        }

        if (this.$route.query.payment_order_sn) {
          obj = { ...obj, payment_order_sn: this.$route.query.payment_order_sn }
        }

        if (this.$route.query.withdraw_cash_sn) {
          obj = { ...obj, withdraw_cash_sn: this.$route.query.withdraw_cash_sn }
        }
        let ret = await fetchStaffList({
          pageSize: this.pageSizeNow,
          page: this.pageNum,
          ...obj
        })

        if (ret.list.length) {
          this.demandList = ret.list
          this.total = ret.count
        } else {
          this.demandList = []
          this.total = 0
        }

        // 获取导出的数量
        let data = await exportAllBillDetails({
          token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
          ...obj,
          operation: 'get_count',
          method: 'post'
        })

        this.alltotal = data.count
        this._exportMsg = data.msg
        this._exportExceed = data.isExceed
      } catch (err) {
        console.log(err)
      }
    },
    // 监听城市val变化
    changeCity() {
      let [id, name, city_sn] = this.city_val.split('|') // es6 数组解构赋值
      this.city_id = id
      this.city_name = name
      this.city_sn = city_sn
    },
    //获取商圈列表
    fetchAreaList(city_id) {
      this.s_area_arr = []
      let fn = new FormData()
      fn.append('city_id', city_id)
      fn.append('agent_id', this.agent_id)

      this.$http.post(this.url + '/area/list', fn).then(
        res => {
          if (res.data.msg == '查询成功' || res.data.code == '200') {
            if (res.data.data != null) {
              res.data.data.list.forEach(item => {
                item.value = item.area_name
              })
              this.areaList = res.data.data.list
              // if (this.s_area_arr == '' || this.s_area_arr == null) {
              // 	// 默认选中非254-平谷的
              // 	this.areaList.forEach(element => {
              // 		// 平谷
              // 		if (element.area_name != '平谷') {
              // 			var pusharr = element.id + '|' + element.area_name
              // 			this.s_area_arr.push(pusharr)
              // 		}
              // 	})
              // }
              if (this.selectedAreasMap[`city-${city_id}`] && this.selectedAreasMap[`city-${city_id}`].length) {
                this.s_area_arr = this.selectedAreasMap[`city-${city_id}`]
              }
            } else {
              this.areaList = []
            }
          } else if (res.data.code == '8886') {
            //code   8886  登录过期
            sessionStorage.clear()
            this.$alert('登录已过期，请重新登录 !', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                window.location = 'login.html'
              }
            })
            return
          } else {
            this.$message.error(res.data.msg)
            return
          }
        },
        res => {
          this.$message.error('网络错误！')
          return
        }
      )
    },
    //分页组件->子组件传值
    onChildValue(item) {
      this.pageNum = item[0]
      this.pageSizeNow = item[1]
      this.listShop()
    },
    //重置
    async resetBtn() {
      await this.resetData() //重置请求数据
      this.pageNum = 1
      this.agent_reset += 1
    },
    //重置请求数据
    resetData() {
      this.pageNum = 1
      // this.city_arr = ''
      // this.city_id = ''
      // this.city_name = ''
      this.s_sn = ''
      this.s_staff_name = ''
      this.s_staff_work_type = ''
      this.s_type = ''
      this.s_status = ''
      this.business_name = ''
      this.business_sn = ''
      this.s_shop_name = ''
      this.shop_sn = ''
      this.s_time_type = '1'
      this.ruleForm.bill_date_start = ''
      this.ruleForm.bill_date_end = ''
      this.ruleForm.date1 = this.$moment().subtract('days', 7).format('YYYY-MM-DD') + ' 00:00:00'
      this.ruleForm.date2 = this.$moment().format('YYYY-MM-DD') + ' 23:59:59'
    },
    //获取选中行的id
    handleSelectionChange(val) {
      //获取用户的选中
      this.multipleSelection = []
      // console.log(val);
      val.forEach(item => {
        this.multipleSelection.push({
          type: item.type,
          sn: item.sn,
          status: item.status,
          payment_order_sn: item.payment_order_sn
        })
      })
      this.multipleSelection = Array.from(new Set(this.multipleSelection))
    },
    //设置表格复选框禁用
    checkboxT(row, index) {
      if (row.status == '30') {
        return false
      } else {
        return true
      }
    },
    //多行的审批或者回款
    // 1:批量确认  2:批量已提现
    async batchPay(index) {
      let fn = new FormData()
      let all = this.multipleSelection
      this.remark = ''
      if (all.length == 0) {
        this.$message.error('请勾选相关列表')
        return
      }

      try {
        if (index == 1) { //批量确认
          this.diaTitle = '结算单确认'
          this.ShowQr = true
          this.qrType = index
          this.qrAll = all
          return
        } else if (index == 2) { //批量已提现
          this.diaTitle = '确认已提现'
          this.ShowQr = true
          this.qrType = index
          this.qrAll = all
          return
        } else if (index == 3) {
          var allDate = []
          all.forEach(item => {
            allDate.push(item.sn)
          })
          await removeOrder({ sn: all[0].payment_order_sn, bill_sn: '' + allDate })
        }

        this.$message.success('操作成功！')
        this.listShop()
        this.hiddenRY()
      } catch (err) { }
    },
    async toRemoveOrder(row) {
      try {
        await removeOrder({ sn: row.payment_order_sn, bill_sn: row.sn })
        this.$message.success('操作成功！')
        this.listShop()
        this.hiddenRY()
      } catch (err) { }
    },
    // 回款确认
    Hk(row) {
      this.sn = row.sn
      this.diaTitle = '提现确认'
      this.ShowHk = true
    },
    // 打款确认
    Dk(row) {
      this.sn = row.sn
      this.diaTitle = '打款确认'
      this.ShowDk = true
    },
    //确认结算单
    Qr(row) {
      this.rowsDate = row
      this.diaTitle = '结算单确认'
      this.ShowQr = true
    },
    //跳转查看列表
    goToList(row) {
      // if (row.status == 70) {
      // 	const { href } = this.$router.resolve({
      // 		path: '/tasklist',
      // 		query: { bill_task_sn: row.detail.toString(), bill_status: 1 }
      // 	})
      // 	window.open(href, '_blank')
      // }
      // if (row.type == 1 || row.type == 3) {
      const { href } = this.$router.resolve({
        path: '/PayDetail',
        query: { bill_staff_sn: row.sn }
      })
      window.open(href, '_blank')
      // } else {
      // 	const { href } = this.$router.resolve({
      // 		path: '/TicketLists',
      // 		query: { bill_staff_sn: row.sn }
      // 	})
      // 	window.open(href, '_blank')
      // }
    },
    //重新生成
    async regenerate(row) {
      let ret = await this.$confirm('确定要重新生成吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      if (ret === 'cancel') return

      try {
        await staffRestartCreate({
          sn: row.sn
        })
        this.$message.success('重新生成成功！')
        this.listShop()
      } catch (err) { }
    },
    // 操作记录
    goTorecord(e) {
      this.resetData()
      this.ids = e.id
      this.message = e.log //行数据
      this.cordTicket = true
      this.diaTitle = '操作记录'
    },
    //隐藏所有的弹框
    hiddenRY() {
      this.remark = ''
      this.ShowHk = false
      this.ShowDk = false
      this.ShowQr = false
      this.cordTicket = false
    },
    //已打款/回款 - 已提现
    async addCxBtn() {
      if (this.remark == '') {
        this.$message.error('请填写必填项')
        return
      }

      try {
        await staffPay({
          sn: this.sn, //结算单sn
          remark: this.remark //备注
        })

        this.$message.success('操作成功！')
        setTimeout(() => {
          this.listShop()
        }, 1000)
        this.hiddenRY()
      } catch (err) { }
    },
    // 确认结算单
    async addQrBtn() {
      if (this.remark == '') {
        this.$message.error('请填写必填项')
        return
      }
      if (this.qrType == 1) { //批量确认
        await staffConfirmy({
          data: JSON.stringify(this.qrAll),
          remark: this.remark
        })
      } else if (this.qrType == 2) { //批量已提现
        var allDate = []
        this.qrAll.forEach(item => {
          let obj = {
            sn: item.sn,
            type: item.type
          }
          allDate.push(obj)
        })
        await staffBatchPay({
          data: JSON.stringify(allDate),
          remark: this.remark
        })
      } else {
        let obj = [
          {
            type: this.rowsDate.type,
            sn: this.rowsDate.sn,
            status: this.rowsDate.status
          }
        ]
        await staffConfirmy({
          data: JSON.stringify(obj),
          remark: this.remark
        })
      }

      this.$message.success('操作成功！')
      this.listShop()
      this.hiddenRY()
    },
    shearchBtn() {
      // 搜索
      this.pageNum = 1
      this.listShop()
    },
    //人才结算单-导出
    downloadOrder() {

      if (this.ruleForm.bill_date_start && !this.ruleForm.bill_date_end) {
        this.$message.error('结算单结束日期不可为空！')
        return
      }
      if (!this.ruleForm.bill_date_start && this.ruleForm.bill_date_end) {
        this.$message.error('结算单开始日期不可为空！')
        return
      }

      let s_departmentIds_Arr = new Array()
      this.s_area_arr.forEach(element => {
        let [id, name] = element.split('|') // es6 数组解构赋值
        s_departmentIds_Arr.push(id.toString())
      })
      let obj = {
        token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
        sn: this.s_sn,
        city_id: this.city_id,
        area_id: '' + s_departmentIds_Arr,
        staff_name: this.s_staff_name,
        work_type: this.s_staff_work_type,
        type: this.s_type,
        shop_sn: this.shop_sn,
        business_sn: this.business_sn,
        status: this.s_status,
        time_type: this.s_time_type,
        bill_date_start: this.ruleForm.bill_date_start ? this.ruleForm.bill_date_start + ' 00:00:00' : '',
        bill_date_end: this.ruleForm.bill_date_end ? this.ruleForm.bill_date_end + ' 23:59:59' : '',
        start_time: this.ruleForm.date1,
        end_time: this.ruleForm.date2,
        agent_id: this.agent_id
      }

      if (this.$route.query.payment_order_sn) {
        obj = {
          ...obj,
          payment_order_sn: this.$route.query.payment_order_sn
        }
      }

      if (this.$route.query.withdraw_cash_sn) {
        obj = {
          ...obj,
          withdraw_cash_sn: this.$route.query.withdraw_cash_sn
        }
      }

      var that = this
      axios
        .get(this.url + '/bill/exportBillList', {
          params: obj
        })
        .then(function (response) {
          that.$alert('已添加下载任务，请到下载管理中查看', '', {
            confirmButtonText: '确定'
          })
        })
        .catch(function (error) {
          alert(error)
        })
    },
    //结算单明细-导出
    downloadOrdermini(row) {
      console.log(row)
      if (row.type == 1 || row.type == 3) {
        //平台任务结算单
        let obj = {
          token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
          bill_staff_sn: row.sn
        }
        let param = $.param(obj)
        window.location.href = this.url + '/bill/exportPayDetail?' + param
      } else {
        //扣罚结算单
        let obj = {
          token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
          bill_staff_sn: row.sn
        }
        let param = $.param(obj)
        window.location.href = this.url + '/ticket/exportTicketDetail?' + param
      }
    },
    changeBtndialogarea() {
      let [id, name] = this.s_area_arr.split('|') // es6 数组解构赋值
      this.s_area_id = id.toString()
      this.s_area_name = name.toString()
    },
    changeBtndialog() {
      let [id, name] = this.city_arr.split('|')
      this.city_id = id.toString()
      this.city_name = name.toString()
    },
    async downloadDetail() {
      if (!this.s_shop_name) {
        this.shop_sn = ''
      }
      if (this._exportExceed) {
        return this.$message.error(this._exportMsg)
      }

      let s_departmentIds_Arr = new Array()
      this.s_area_arr.forEach(element => {
        let [id, name] = element.split('|') // es6 数组解构赋值
        s_departmentIds_Arr.push(id.toString())
      })

      if (this.ruleForm.date1 == null) {
        this.ruleForm.date1 = ''
      }

      if (this.ruleForm.date2 == null) {
        this.ruleForm.date2 = ''
      }

      if (this.ruleForm.bill_date_start && !this.ruleForm.bill_date_end) {
        this.$message.error('结算单结束日期不可为空！')
        return
      }
      if (!this.ruleForm.bill_date_start && this.ruleForm.bill_date_end) {
        this.$message.error('结算单开始日期不可为空！')
        return
      }
      if (!this.business_name) {
        this.business_sn = ''
      }

      try {
        let obj = {
          token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
          operation: 'export',
          sn: this.s_sn,
          city_id: this.city_id,
          area_id: '' + s_departmentIds_Arr,
          staff_name: this.s_staff_name,
          work_type: this.s_staff_work_type,
          type: this.s_type,
          status: this.s_status,
          time_type: this.s_time_type,
          bill_date_start: this.ruleForm.bill_date_start ? this.ruleForm.bill_date_start + ' 00:00:00' : '',
          bill_date_end: this.ruleForm.bill_date_end ? this.ruleForm.bill_date_end + ' 23:59:59' : '',
          start_time: this.ruleForm.date1,
          end_time: this.ruleForm.date2,
          shop_sn: this.shop_sn,
          business_sn: this.business_sn
        }

        if (this.$route.query.payment_order_sn) {
          obj = { ...obj, payment_order_sn: this.$route.query.payment_order_sn }
        }

        if (this.$route.query.withdraw_cash_sn) {
          obj = { ...obj, withdraw_cash_sn: this.$route.query.withdraw_cash_sn }
        }

        var that = this

        axios
          .get(this.url + '/bill/exportAllDetail', {
            params: obj
          })
          .then(function (response) {
            // console.log(response.data.msg)
            that.$alert('已添加下载任务，请到下载管理中查看', '', {
              confirmButtonText: '确定'
            })
          })
          .catch(function (error) {
            alert(error)
          })
        // let params = obj
        // window.location.href = this.url + '/bill/exportAllDetail?' + qs.stringify(params)
      } catch (err) {
        console.log(err)
      }
    },
    //全选-取消全选商圈
    selectAllArea() {
      let arr = []
      this.areaList.forEach(item => {
        arr.push(`${item.id}|${item.area_name}`)
      })
      if (this.areaStatus == true) {
        this.s_area_arr = arr
      } else {
        this.s_area_arr = []
      }
      this.areaStatus = !this.areaStatus
      // this.shearchBtn()
    },
    goToMain(row) {
      const { href } = this.$router.resolve({
        path: '/billCont',
        query: { sn: row.sn }
      })
      window.open(href, '_blank')
    },
    async setValue(arrVal) {
      this.agent_id = arrVal.agent_id

      this.cityList = arrVal.city_list
      this.city_val = this.cityList[0].id + '|' + this.cityList[0].name
      this.city_name = this.cityList[0].name
      this.city_id = this.cityList[0].id
      // await this.fetchAreaList(this.city_id) //商圈列表
      await this.getShopList()
    }
  },
  filters: {}
}
</script>

<style scoped>
.search_box {
  width: 790px;
}
.auditCentent .labels {
  min-height: 100px;
}
.auditCentent .labels .labels_label {
  float: left;
  cursor: pointer;
}
.check_label {
  background: var(--purple4);
  color: #fff;
  border: none;
}
.pdf {
  width: 860px;
  height: 600px;
}
.main_user {
  background: var(--zfy-red);
  color: #fff;
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
}
@media (max-width: 767.78px) {
  .titleBox {
    height: 40px;
  }
}

.row-info {
  padding: 10px 0;
}
.auditCentent {
  width: 90%;
  margin: 0 auto;
}

.auditCentent button {
  width: 82px;
}

.timeline {
  height: 30px;
  line-height: 30px;
  margin-bottom: 20px;
}

.timeline span {
  margin-left: 10px;
}

#ball {
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: #5ea345;
  border-radius: 50%;
  position: fixed;
  transition: left 1s linear, top 1s ease-in;
}
</style>



// WEBPACK FOOTER //
// src/components/bill/List.vue